import { offActions } from '@/store/offSlice'
import { useAppDispatch, useAppSelector } from '@/utils/hooks'
import { AddWebsite } from '@/windows'
import { getClassNames, Icon } from 'magic-ui-react'
import { useState } from 'react'
import StartMenu from '../StartMenu'
import Search from './Search'
import styles from './styles.module.less'

/**
 * 应用顶部
 * @returns AppNav
 */
const AppNav = () => {
  const {
    off: {
      editPage,
      searchTopSwitch,
    },
    appConfig: {
      conciseMode
    }
  } = useAppSelector(state => state)

  const dispatch = useAppDispatch()

  const [visible, setVisible] = useState(false);

  const serchRender = () => {
    if (conciseMode) {
      return <></>
    }
    return (
      <div className={styles.seatchIcon}>
        <div
          className={getClassNames([
            'align-middle transition cursor-pointer',
            {
              'text-yellow-500': searchTopSwitch
            }
          ])}
          onClick={() => {
            dispatch(offActions.update({
              searchTopSwitch: !searchTopSwitch
            }))
          }}
        >
          <Icon
            className='align-middle'
            size={26}
            icon={'search'}
          />
        </div>
      </div>
    )
  }

  const pageEdit = () => {
    if (conciseMode) {
      return <></>
    } else {
      return (
        <div>
          <div
            className={getClassNames([
              'align-middle transition cursor-pointer',
              {
                'text-yellow-500': editPage
              }
            ])}
            onClick={() => {
              dispatch(offActions.update({
                editPage: !editPage
              }))
            }}
          >
            <Icon
              className='align-middle'
              size={26}
              icon={'list-check'}
            />
          </div>
        </div>
      )
    }
  }

  return (
    <>
      <nav className={styles.AppNav}>
        <div className={styles.AppNavContent}>
          <div className='flex justify-start gap-5 items-center flex-1'>
            <div
              className={getClassNames([
                'align-middle transition cursor-pointer',
                {
                  'text-yellow-500': visible
                }
              ])}
              onClick={() => {
                setVisible(!visible)
              }}
            >
              <Icon
                className='align-middle'
                size={26}
                icon={'home'}
              />
            </div>
            <div>
              <AddWebsite />
            </div>

            {serchRender()}
          </div>
          <div className='flex-1'>
            <Search />
          </div>
          <div className='flex-1 flex justify-end'>
            {pageEdit()}
          </div>
        </div>

      </nav>
      <StartMenu
        visible={visible}
        onClose={() => {
          setVisible(false)
        }}
      />
    </>
  )
}
export default AppNav